import { Outlet } from 'react-router-dom'
import React from 'react'
import { Menu } from 'antd'
import {
    MailOutlined,
    AppstoreOutlined,
    SettingOutlined,
  } from '@ant-design/icons'
export default () => {
    const tab = (x, path) => {
        console.log(x)
        document.location.href = '/#' + path
      }
    return (
        <div>
            <h3>父子组件相互调用</h3>

            <Menu mode="horizontal">
          <Menu.Item
            key={0}
            onClick={(o) => {
              tab(o, '/functionComponent/parentChildCall/parentCallChild')
            }}
            path="/functionComponent/parentChildCall/parentCallChild"
            icon={<MailOutlined />}
          >
            父组件调用子组件
          </Menu.Item>
          <Menu.Item
            key={1}
            onClick={(o) => {
              tab(o, '/functionComponent/parentChildCall/childCallParent')
            }}
            path="/functionComponent/parentChildCall/childCallParent"
            icon={<MailOutlined />}
          >
            子组件调用父组件
          </Menu.Item>

          <Menu.Item
            key={2}
            onClick={(o) => {
              tab(o, '/functionComponent/parentChildCall/obtainNestChildComponent')
            }}
            path="/functionComponent/parentChildCall/obtainNestChildComponent"
            icon={<MailOutlined />}
          >
            获取嵌套子元素
          </Menu.Item>

          </Menu>
            <Outlet />
        </div>
    )
}